<template>
    <div>
        <div class="head">
            <div class="iconfont icon-zuojiantou myicon" @click.stop="back"></div>
            <div class="title">添加朋友</div>
        </div>
        <van-search v-model="value" placeholder="请输入搜索关键词" />
        <keep-alive>
            <div class="better_scroll_wrapper">
                <ul>
                    <li v-for="(item,index) in filterUserList" :key="item.id" class="userlist" @click.stop="add_friend(item)">
                        <div class="touxiang">
                            <img src="http://admin.xukunqi.com/public/static/headimage.png" width="43" height="43">
                        </div>
                        <div class="name_and_username">
                            <div class="name">
                                {{item.name}}
                            </div>
                            <div class="username">
                                琪琪号：{{item.username}}
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </keep-alive>
    </div>
</template>

<script>
    import Vue from 'vue';
    import { Search,List,Cell,Image as VanImage,Toast} from 'vant';
    import BetterScroll from 'better-scroll';
    import Cookies from 'js-cookie'
    Vue.use(Search).use(List).use(Cell).use(VanImage).use(Toast);

    export default {
        name: "addFriend",
        data(){
            return{
                value:"",
            }
        },
        components:{
            Search,
        },

        mounted(){
            this.$nextTick(()=>{
                new BetterScroll(".better_scroll_wrapper",{
                    scrollbar:{
                        fade:true,
                    },
                    //使用的better-scroll默认会阻止touch事件。所以在配置中需要加上click: true
                    mouseWheel: true,
                    click: true,
                    tap: true

                })
            })
        },

        computed:{
            //过滤搜索用户
            filterUserList(){
                if(this.$store.state.friendList.length === 0){
                    return this.$store.state.userList.filter(item => ((item.name.toUpperCase().includes(this.value.toUpperCase())) || (item.username.toUpperCase().includes(this.value.toUpperCase()))) && (!item.username.toUpperCase().includes(Cookies.get('username').toUpperCase())));
                }else{
                    let mynofriend=[];
                    let usernameList=this.$store.state.friendList.map(item => item.toid);
                    for(let i =0;i<this.$store.state.userList.length;i++){
                        if(!usernameList.includes(this.$store.state.userList[i].username)){
                            mynofriend.push(this.$store.state.userList[i]);
                        }
                    }
                    // return this.$store.state.userList.filter(item => ((item.name.toUpperCase().includes(this.value.toUpperCase())) || (item.username.toUpperCase().includes(this.value.toUpperCase()))) && (!item.username.toUpperCase().includes(Cookies.get('username').toUpperCase())) && (!item.username.toUpperCase().includes(this.$store.state.friendList.toid.toUpperCase())));
                    return mynofriend.filter(item =>((item.name.toUpperCase().includes(this.value.toUpperCase())) || (item.username.toUpperCase().includes(this.value.toUpperCase()))) && (!item.username.toUpperCase().includes(Cookies.get('username').toUpperCase())));
                }
            }
        },

        methods:{
            back(){
                this.$router.back();
            },

            add_friend(item){

                //判断此人是否为我的好友,是则调到发送消息页面





                //去到添加好友详情页面
                this.$router.push({path:'/center/addFriend_detail',query:{id:item.username,name:item.name}});
            }
        }
    }
</script>

<style scoped>
    .head{height: 50px;width: 100%;display: flex;flex-direction: row;}
    .myicon{font-size: 21px;position: fixed;top: 16px;left: 21px;}
    .title{font-size: 18px;line-height: 50px;text-align: center;flex-grow: 1;}
    .search_outer{}
    .userlist{height: 62px;width: calc(100% - 34px);margin: 10px auto;border-bottom: solid 1px #ececec;display: flex;flex-direction: row;position: relative;background-color: pink;border-radius: 15px;}
    .touxiang{width: 43px;height: 43px;margin-top: 10px;margin-left: 5px;}
    .name_and_username{margin-left: 10px;}
    .name{font-size: 15px;line-height: 15px;margin-top: 15px;}
    .username{font-size: 12px;line-height: 12px;margin-top: 7px;}
</style>